<template>
  <my-navigation-bar>帮助与反馈</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
  <view v-if="flag">
    <view class="fallback-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="title">
        反馈描述
      </view>
      <view class="input-box">
        <textarea name="" id="" cols="30" rows="10" class="text-block" placeholder="请输入您要反馈的问题"
          placeholder-style="color:#A1A1A1">
    
       </textarea>
        <view class="btn1">提交反馈</view>
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
  <scroll-view scroll-y="true" class="scroll-box">
    <view class="fallback-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="title">
        反馈描述
      </view>
      <view class="input-box">
        <textarea name="" id="" cols="30" rows="10" class="text-block" placeholder="请输入您要反馈的问题"
          placeholder-style="color:#A1A1A1">
    
       </textarea>
        <view class="btn1">提交反馈</view>
      </view>
    </view>
  </scroll-view>
 </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,
  } from "vue";
   import useBounceFunc from "../../hooks/bounce.js";
   const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(()=>{
    return getApp().globalData.isIphoneX;
  })
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .navbar {
    position: fixed;
    top: 63rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }
.scroll-box{
  height: 100vh;
}
  .fallback-box {
    margin-top: 150rpx;
    background-color: #F2F2F2;
    height: 100vh;
    padding: 0 30rpx;

    .title {
      padding: 40rpx 0;
      color: #A1A1A1;
      font-size: 38rpx;
    }

    .input-box {
      position: relative;

      .text-block {

        height: 340rpx;
        width: 100%;
        padding: 30rpx 20rpx;
        background-color: #fff;
        border: 1px solid #A6A6A6;
        border-radius: 45rpx;
        box-sizing: border-box;

      }

      .btn1 {
        position: absolute;
        right: 40rpx;
        bottom: 30rpx;
      }
    }

  }
</style>
